<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>双向绑定\v-bind\v-on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app" v-bind:title="name">
    <button v-on:click="haha">有种，你就点击老子啊</button>
    <h1>{{name}}</h1>
    <select v-model:selected="selected">
        <option value="" disabled>--请选择--</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    {{selected}}
</div>
</body>
<script>
    // 实例化vue对象
    new Vue({
        el:"#app",
        data:{
            name:"hello vue",
            selected:""
        },
        methods:{
           haha:function (e) {
               alert("czx,hello")
           }
        }
    })
</script>
</html>